<template>
  <el-row>
    <el-col :span="12" class="access-source">
      <el-card>
        <h3>高频访问 IP</h3>
        <div class="access-source-item" v-for="item in accessData.accessIp" :key="item">
          <span class="access-item-name">{{ item.name }}</span>
          <span class="access-item-value">{{ item.value }}次</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12" class="access-source">
      <el-card>
        <h3>访问来源 TOP5</h3>
        <div class="access-source-item" v-for="item in accessData.accessSource" :key="item">
          <span class="access-item-name">{{ item.name }}</span>
          <span class="access-item-value">{{ item.value }}次</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { reactive } from 'vue'

const accessData = reactive({
  accessIp:[],// 高频访问 IP
  accessSource:[],// 访问来源
})

// 截取top5
const cutTopFive = data => {
  return Object.keys(data).map(item => {
    return { name:item, value:data[item].count }
  }).sort((a,b) => b.value - a.value).splice(0,5)
}

const setData = (ip,source)=>{
  accessData.accessIp = cutTopFive(ip)
  accessData.accessSource = cutTopFive(source)
}

defineExpose({
  setData
})
</script>

<style lang="less" scoped>
.access-source{
  .el-card{
    .el-card__body{
      .access-source-item{
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-size: 13px;
        font-weight: bold;
        .access-item-name{
          color: #666666;
        }
        .access-item-value{
          color: @subtitle;
        }
      }
    }
  }
}
</style>
